<template>
    <div class="content flex-col">
        <div class="tenant-header flex-row">
            <div class="tenant-header-left">
                APK管理
            </div>
            <div class="tenant-header-right">
                <a-button type="primary" @click="handleAdd">
                    <a-icon type="plus" />
                    添加APK
                </a-button>
            </div>
        </div>
        <div class="tenant-content tenant-table">
            <el-table
                    :data="tableData"
                    row-class-name="category-table-tr"
                    height="100%"
                    style="width: 100%">
                <el-table-column prop="code" label="编码">
                </el-table-column>
                <el-table-column prop="version" label="版本">
                </el-table-column>
                <el-table-column prop="link" label="链接">
                </el-table-column>
                <el-table-column prop="desc" label="描述">
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit"
                                   @click="handleUpdate(scope.row)"
                                   type="text">修改</el-button>
                        <el-button icon="el-icon-delete"
                                   @click="handleDelete(scope.row)"
                                   type="text" style="color: red">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :title="submitState.state === 'add' ? '一 添加Apk 一' : '一 修改Apk 一'"
                   key="tenant-add"
                   center
                   :visible.sync="dialogVisible"
                   @close="dialogVisible = false"
        >
            <el-form :model="form" ref="ruleForm" >
                <el-form-item label="编 码："
                    v-if="submitState.state === 'add'"
                    :label-width="formLabelWidth"
                    prop="code">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item label="版 本："
                    :label-width="formLabelWidth"
                    prop="version">
                    <el-input v-model="form.version"></el-input>
                </el-form-item>
                <el-form-item label="链 接："
                    :label-width="formLabelWidth"
                    prop="link">
                    <el-input v-model="form.link"></el-input>
                </el-form-item>
                <el-form-item label="描述："
                    :label-width="formLabelWidth"
                    prop="desc">
                    <el-input v-model="form.desc"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="formSubmit('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { getApkList, addApk, editApk, deleteApk} from '@/api/authority'

    export default {
        name: "tenant",
        data() {
            return {
                dialogVisible: false,
                submitState: {
                    state:'add',
                    node: {}
                },
                form: {
                    code: '',
                    version: '',
                    link: '',
                    desc: '',
                },


                formLabelWidth: '120px',
                tableData: []
            }
        },
        computed:{
        },
        methods:{
            async getList() {
                let data = await getApkList()
                this.tableData = data || []
            },
            formSubmit(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        this.dialogVisible = false;
                        if (this.submitState.state === "add") {
                            await addApk(this.form)
                            this.$message({
                                type: 'success',
                                message: '添加成功'
                            });
                            this.getList()
                        }
                        else if (this.submitState.state === "update") {
                            let data = {
                                "id": this.submitState.node.id,
                                "version": this.form.version,
                                "link": this.form.link,
                                "desc": this.form.desc,
                            }
                            await editApk(data)
                            this.$message({
                                type: 'success',
                                message: '更新成功'
                            });
                            this.getList()
                        }
                    } else {
                        return false;
                    }
                });
            },
            handleAdd() {
                this.form = {
                    code: '',
                    version: '',
                    link: '',
                    desc: '',
                }

                this.submitState.state = "add";
                this.dialogVisible = true;
            },
            handleUpdate(row) {
                this.submitState = {
                    state: "update",
                    node: row
                };
                this.form.version = row.version
                this.form.link = row.link
                this.form.desc = row.desc
                this.dialogVisible = true;
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    await deleteApk({id: row.id})
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    this.getList()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
        created() {
            this.getList();
        }
    }
</script>